<template>
    <el-form
        v-show="getShow"
        ref="formLogin"
        :model="loginData.loginForm"
        :rules="LoginRules"
        class="login-form"
        label-position="top"
        label-width="120px"
        size="large"
    >
        <el-row style="margin-right: -10px; margin-left: -10px">
            <!--登录表单标题-->
            <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
                <el-form-item>
                    <LoginFormTitle style="width: 100%"/>
                </el-form-item>
            </el-col>
            <!--用户名-->
            <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
                <el-form-item prop="username">
                    <el-input
                        v-model="loginData.loginForm.username"
                        :placeholder="t('login.usernamePlaceholder')"
                        :prefix-icon="iconAvatar"
                    />
                </el-form-item>
            </el-col>
            <!--密码-->
            <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
                <el-form-item prop="password">
                    <el-input
                        v-model="loginData.loginForm.password"
                        :placeholder="t('login.passwordPlaceholder')"
                        :prefix-icon="iconLock"
                        show-password
                        type="password"
                        @keyup.enter="handleLogin"
                    />
                </el-form-item>
            </el-col>
            <el-col
                :span="24"
                style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px"
            >
                <el-form-item>
                    <!--<el-row justify="space-between" style="width: 100%">-->
                    <!--    &lt;!&ndash;记住我&ndash;&gt;-->
                    <!--    <el-col :span="6">-->
                    <!--        <el-checkbox v-model="loginData.loginForm.rememberMe">-->
                    <!--            {{ t('login.remember') }}-->
                    <!--        </el-checkbox>-->
                    <!--    </el-col>-->
                    <!--    &lt;!&ndash;忘记密码&ndash;&gt;-->
                    <!--    <el-col :offset="6" :span="12">-->
                    <!--        <el-link style="float: right" type="primary">{{ t('login.forgetPassword') }}</el-link>-->
                    <!--    </el-col>-->
                    <!--</el-row>-->
                </el-form-item>
            </el-col>
            <!--登录-->
            <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
                <el-form-item>
                    <XButton
                        :loading="loginLoading"
                        :title="t('login.login')"
                        class="w-[100%]"
                        type="primary"
                        @click="handleLogin"
                    />
                </el-form-item>
            </el-col>
            <!--<Verify-->
            <!--    ref="verify"-->
            <!--    :captchaType="captchaType"-->
            <!--    :imgSize="{ width: '400px', height: '200px' }"-->
            <!--    mode="pop"-->
            <!--    @success="handleLogin"-->
            <!--/>-->
            <!--其他登录-->
            <!--<el-col :span="24" style="padding-right: 10px; padding-left: 10px">-->
            <!--    <el-form-item>-->
            <!--        <el-row :gutter="5" justify="space-between" style="width: 100%">-->
            <!--            &lt;!&ndash;手机登录&ndash;&gt;-->
            <!--            <el-col :span="8">-->
            <!--                <XButton-->
            <!--                    :title="t('login.btnMobile')"-->
            <!--                    class="w-[100%]"-->
            <!--                    @click="setLoginState(LoginStateEnum.MOBILE)"-->
            <!--                />-->
            <!--            </el-col>-->
            <!--            &lt;!&ndash;二维码登录&ndash;&gt;-->
            <!--            <el-col :span="8">-->
            <!--                <XButton-->
            <!--                    :title="t('login.btnQRCode')"-->
            <!--                    class="w-[100%]"-->
            <!--                    @click="setLoginState(LoginStateEnum.QR_CODE)"-->
            <!--                />-->
            <!--            </el-col>-->
            <!--            &lt;!&ndash;注册&ndash;&gt;-->
            <!--            <el-col :span="8">-->
            <!--                <XButton-->
            <!--                    :title="t('login.btnRegister')"-->
            <!--                    class="w-[100%]"-->
            <!--                    @click="setLoginState(LoginStateEnum.REGISTER)"-->
            <!--                />-->
            <!--            </el-col>-->
            <!--        </el-row>-->
            <!--    </el-form-item>-->
            <!--</el-col>-->
            <!--其他登录方式-->
            <!--<el-divider content-position="center">{{ t('login.otherLogin') }}</el-divider>-->
            <!--<el-col :span="24" style="padding-right: 10px; padding-left: 10px">-->
            <!--    <el-form-item>-->
            <!--        <div class="w-[100%] flex justify-between">-->
            <!--            <Icon-->
            <!--                v-for="(item, key) in socialList"-->
            <!--                :key="key"-->
            <!--                :icon="item.icon"-->
            <!--                :size="30"-->
            <!--                class="anticon cursor-pointer"-->
            <!--                color="#999"-->
            <!--                @click="doSocialLogin(item.type)"-->
            <!--            />-->
            <!--        </div>-->
            <!--    </el-form-item>-->
            <!--</el-col>-->
        </el-row>
    </el-form>
</template>
<script lang="ts" setup>
import {ElLoading} from 'element-plus';
import LoginFormTitle from './LoginFormTitle.vue';
import {useIcon} from '@/hooks/web/useIcon';
import {LoginStateEnum, useLoginState} from './useLogin';
import {useUserStore} from '@/store/modules/useUserStore';
import {usePermissionStore} from '@/store/modules/usePermissionStore';
import request from "@/request";
import CacheKeys from "@/constants/CacheKeys";

defineOptions({name: 'LoginForm'});

const {t} = useI18n();
// 引入ICON
const iconAvatar = useIcon({icon: 'ep:avatar'});
const iconLock = useIcon({icon: 'ep:lock'});
const formLogin = ref();
const {setLoginState, getLoginState} = useLoginState();
const router = useRouter();
const loginLoading = ref(false);
const verify = ref();
const captchaType = ref('blockPuzzle'); // blockPuzzle 滑块 clickWord 点击文字

const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);

const LoginRules = {
    username: [required],
    password: [required],
};

const loginData = reactive({
    isShowPassword: false,
    captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
    loginForm: {
        username: 'lzy',
        password: '',
    },
});

const socialList = [
    {icon: 'ant-design:wechat-filled', type: 30},
    {icon: 'ant-design:dingtalk-circle-filled', type: 20},
    {icon: 'ant-design:github-filled', type: 0},
    {icon: 'ant-design:alipay-circle-filled', type: 0},
];

const loading = ref(); // ElLoading.service 返回的实例
// 登录
const handleLogin = async () => {
    loginLoading.value = true;

    try {
        loading.value = ElLoading.service({
            lock: true,
            text: '正在加载系统中...',
            background: 'rgba(0, 0, 0, 0.7)',
        });
        request.post('/hive/login', loginData.loginForm).then((res) => {
            console.log("登录结果", res)
            // 缓存用户信息
            useUserStore().setUserInfo();
            // 生成用户菜单
            usePermissionStore().setUserMenuRoute();
            // 跳转到首页
            router.push({path: '/index'}).then(r => console.log(r));
        }).catch((err) => {
            useUserStore().loginOut();
        })
    } finally {
        // 加载完成
        loginLoading.value = false;
        loading.value.close();
    }
};

const doSocialLogin = async (type: number) => {
    // 其他登录方式
    console.log(type);
};
onMounted(() => {

});
</script>

<style lang="scss" scoped>
:deep(.anticon) {
    &:hover {
        color: var(--el-color-primary) !important;
    }
}

.login-code {
    float: right;
    width: 100%;
    height: 38px;

    img {
        width: 100%;
        height: auto;
        max-width: 100px;
        vertical-align: middle;
        cursor: pointer;
    }
}
</style>
